import React from 'react';
import { Layout, Nav, Button, Avatar } from '@douyinfe/semi-ui';
import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons';
import { useNavigate } from "react-router-dom";

export default (props: any) => {
  const { Header, Footer, Sider, Content } = Layout;
  const date = new Date().getFullYear()
  const navigate = useNavigate()
  
  return (
    <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
      <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
        <Nav
          defaultSelectedKeys={['Home']}
          style={{ maxWidth: 220, height: '100%' }}
          items={[
            { itemKey: '', text: '控制面板', icon: <IconHome size="large" /> },
            { itemKey: 'menu', text: '管理菜单', icon: <IconHistogram size="large" /> },
            { itemKey: 'role', text: '管理权限', icon: <IconLive size="large" /> },
            { itemKey: 'user', text: '管理用户', icon: <IconLive size="large" /> },
            { itemKey: 'xxx', text: '测试', icon: <IconLive size="large" /> },
            { itemKey: 'sign/login', text: '登录', icon: <IconSetting size="large" /> },
          ]}
          header={{
            logo: <img src="/webcast_logo.svg" />,
            text: 'QiankunOSS',
          }}
          onClick={data => navigate(`/${data.itemKey}`)}
          footer={{
            collapseButton: true,
          }}
        />
      </Sider>
      <Layout>
        <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
          <Nav
            mode="horizontal"
            footer={
              <>
                <Button
                  theme="borderless"
                  icon={<IconBell size="large" />}
                  style={{
                    color: 'var(--semi-color-text-2)',
                    marginRight: '12px',
                  }}
                />
                <Button
                  theme="borderless"
                  icon={<IconHelpCircle size="large" />}
                  style={{
                    color: 'var(--semi-color-text-2)',
                    marginRight: '12px',
                  }}
                />
                <Avatar color="orange" size="small">
                  YJ
                </Avatar>
              </>
            }
          ></Nav>
        </Header>
        <div className='p-[24px] bg-gray-200' >
          {props.children}
        </div>
        <Footer
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            padding: '20px',
            color: 'var(--semi-color-text-2)',
            backgroundColor: 'rgba(var(--semi-grey-0), 1)',
          }}
        >
          <span
            style={{
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
            Copyright © {date}
            <a
              href="#"
              className="text-slate-500 hover:text-slate-700 text-sm font-semibold py-1 mx-2"
            >
              Macrohard
            </a>
          </span>
          <span>
            <span style={{ marginRight: '24px' }}>平台客服</span>
            <span>反馈建议</span>
          </span>
        </Footer>
      </Layout>
    </Layout>
  );
};
